<template>
  <div class="advanced-search">
    <a-form layout="inline" :model="formState">
      <a-form-item v-for="field in fields" :key="field.name" :label="field.label">
        <template v-if="field.type === 'input'">
          <a-input
            v-model:value="formState[field.name]"
            :placeholder="field.placeholder"
            allow-clear
            @change="handleSearch"
          />
        </template>
        <template v-else-if="field.type === 'select'">
          <a-select
            v-model:value="formState[field.name]"
            :placeholder="field.placeholder"
            :options="field.options"
            allow-clear
            style="width: 200px"
            @change="handleSearch"
          />
        </template>
        <template v-else-if="field.type === 'dateRange'">
          <a-range-picker
            v-model:value="formState[field.name]"
            :placeholder="field.placeholder"
            @change="handleSearch"
          />
        </template>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="handleSearch">
            <template #icon><SearchOutlined /></template>
            搜索
          </a-button>
          <a-button @click="handleReset">
            <template #icon><ReloadOutlined /></template>
            重置
          </a-button>
          <a-button type="link" @click="toggleAdvanced">
            {{ showAdvanced ? '收起' : '展开' }}
            <template #icon>
              <component :is="showAdvanced ? 'UpOutlined' : 'DownOutlined'" />
            </template>
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import {
  SearchOutlined,
  ReloadOutlined,
  UpOutlined,
  DownOutlined
} from '@ant-design/icons-vue'

const props = defineProps({
  fields: {
    type: Array,
    required: true
  },
  initialValues: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['search', 'reset'])

const showAdvanced = ref(false)
const formState = reactive({ ...props.initialValues })

const visibleFields = computed(() => {
  return showAdvanced.value
    ? props.fields
    : props.fields.filter(field => !field.advanced)
})

const handleSearch = () => {
  const values = { ...formState }
  Object.keys(values).forEach(key => {
    if (values[key] === undefined || values[key] === null || values[key] === '') {
      delete values[key]
    }
  })
  emit('search', values)
}

const handleReset = () => {
  Object.keys(formState).forEach(key => {
    formState[key] = undefined
  })
  emit('reset')
}

const toggleAdvanced = () => {
  showAdvanced.value = !showAdvanced.value
}
</script>

<style scoped>
.advanced-search {
  margin-bottom: 16px;
  padding: 16px;
  background: #fff;
  border-radius: 4px;
}

:deep(.ant-form-item) {
  margin-bottom: 16px;
}

:deep(.ant-form-item-label) {
  padding-right: 8px;
}

/* 暗色主题适配 */
:deep([data-theme='dark'] .advanced-search) {
  background: #1f1f1f;
}
</style> 